<script setup>
import axios from 'axios'
import { ImageLayer, PointLayer, Scene } from '@antv/l7'
import { Map } from '@antv/l7-maps'
import { Popup } from '@antv/l7'

import { ref } from 'vue'
import { onMounted } from 'vue'
import { APPROVE, AUDIT } from '../../util/type'
import {ClassType} from '../../util/type'
import moment from 'moment'
import { url } from '../../util/urlconfig'
let scene
let popup
onMounted(()=>{
 scene = new Scene({
  id: 'map',
  map: new Map({
    center: [500, 500],
    zoom: 3,
    version: 'SIMPLE',
    mapSize: 1000,
    maxZoom: 5,
    minZoom: 2,
    pitchEnabled: false,
    rotateEnabled: false,
  }),
})
scene.setBgColor('rgb(94, 182, 140)')

const imagelayer = new ImageLayer({}).source(
  url,
  {
    parser: {
      type: 'image',
      extent: [360, 400, 640, 600],
    },
  },
)

imagelayer.on('click', () => {
  // console.log(e)

 popup && popup.close()


})

scene.on('loaded', () => {
  getList()
  scene.addLayer(imagelayer)
})

})

const getList=async ()=>{
  const res= await axios.get('/adminapi/labs')
  // console.log(res)
  const list=res.data.map(item=>({
    x:item.x,
    y:item.y,
    t:item.title,
    id:item.id
  }))
  addTextLayer(list)
}

window.add_popup=(x,y)=>{
  // console.log(x,y)
  showLabDialog.value=true

  // 将prop隐藏
  popup.close()

  //x,y
  addLab.value.x=500+2.8*x
  addLab.value.y=500+2.8*y

      
}

const showLabDialog=ref(false)
const addLab=ref({
  title:'',
  capacity:'',
  lab_type:'',
  college_type:'',
  x:0,
  y:0
})




const addTextLayer=(data)=>{
        const textlayer = new PointLayer({ zIndex: 2 })
        .source(
          data,{
          parser: {
            type: 'json',
            x: 'x',
            y: 'y',
          },
        })
        .shape('t', 'text')
        .size(16)
        .active({
          color: '#00f',
          mix: 0.9,
        })
        .color('rgb(13, 71, 161)')
        .style({
          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          spacing: 2, // 字符间距
          fontWeight: '800',
          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: '#ffffff', // 描边颜色
          strokeWidth: 2, // 描边宽度
          textAllowOverlap: true,
        })

      bindTextEvent(textlayer)
      scene.addLayer(textlayer)
}

const bindTextEvent=(textlayer)=>{
  popup && popup.close()
  textlayer.on('click',async (e)=>{

  // 一次性请求两个接口
  const res=await Promise.all([axios.get(`/adminapi/books?lab_id=${e.feature.id}&book_state=${AUDIT}`),axios.get(`/adminapi/books?lab_id=${e.feature.id}&book_state=${APPROVE}`)])
   let list=[...res[0].data,...res[1].data]


  //  映射一个结构
  if(list.length!==0){
    list= list.map(item => `<li class="home-item el-card is-always-shadow">
      ${moment(item.book_time).format('YYYY-MM-DD')}
      ${ClassType.find(data =>data.value===item.book_class).label}
      <span class=${item.book_state===0?'audit':'approve'}>${item.book_state===1?'已批准':item.book_state===0?'审核中':''}</span>
      </li>`).join('')
  }else{
    list='<li class="home-item el-card is-always-shadow">暂无预约信息</li>'
  }
   
    // console.log(list)



   popup = new Popup({
    offsets: [0, 0],
    closeButton: false,
  })
    .setLnglat(e.lngLat)
    .setHTML(
      list
    )
  scene.addPopup(popup)
  })
}
</script>

<template>
  <div>
    <div style="min-height: 100vh; justify-content: center;position: relative" id="map" />
  </div>
</template>

<style scoped lang="scss">
:deep(.home-item){
  list-style: none;
  height: 30px;
  line-height: 30px;
  padding: 4px; 
  margin: 3px;
  .approve{
    color: #43f15f;
  }
  .audit{
    color: orange;
  }
}
</style>
